import { FC, memo } from 'react';
import styles from './coinIcon.module.less';

interface ICoinIconProps {
  // 币种
  coin: string;
  size?: number;
}

const CoinIcon: FC<ICoinIconProps> = (props) => {
  const imgSrc = require('@/images/coin_' + props.coin.toLowerCase() + '.png');
  const size = props.size || 22;
  const coinWrapStyle = {
    width: size + 'px',
    height: size + 'px',
  };
  const coinImgStyle = {
    width: size - 2 + 'px',
    height: size - 2 + 'px',
  };
  return (
    <div
      className={`flex ai-center jc-center ${styles.coinIcon}`}
      style={coinWrapStyle}
    >
      <img className={styles.coinImg} src={imgSrc} style={coinImgStyle} />
    </div>
  );
};

export default memo(CoinIcon);
